<script setup>
import { useRouter } from 'vue-router'
import { gameStores } from '@/stores/gameStores'
import { ref, watch } from 'vue'
import { useDataStore } from '@/stores/userDataStore'
import { onMounted } from 'vue'
import { openWS } from '@/script/ws'

const userData = useDataStore()
const gameStore = gameStores()
const router = useRouter()

function goGameSelf() {
    gameStore.gameData = []
    gameStore.time = 60
    router.push({ path: '/gameSelf' })
}

const self = ref({})

watch(
    () => userData.position,
    (newVal) => {
        self.value = newVal
    },
    { immediate: true },
)

watch(
    () => userData.onlineUserList,
    (newVal) => {
        console.log('newVal onlineUserList ' + newVal)
        self.value.history = newVal
    },
    { immediate: true },
)

onMounted(() => {
    userData.userId = JSON.parse(localStorage.getItem('useData'))?.userId
    if (!userData.userId) {
        userData.userId = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'.replace(/[x]/g, () =>
            ((Math.random() * 16) | 0).toString(16),
        )
    }
})

if (!userData.getWS) {
    openWS()
}
</script>

<template>
    <main role="main" aria-labelledby="title">
        <div class="card">
            <div class="left">
                <div class="actions">
                    <button class="btn ghost" @click="goGameSelf" aria-label="返回上一页">
                        面对面游戏
                    </button>
                </div>
            </div>
            <div class="right" aria-hidden="true">
                <!-- 五子棋棋盘 + 棋子装饰 -->
                <svg
                    viewBox="0 0 400 400"
                    class="decor"
                    xmlns="http://www.w3.org/2000/svg"
                    focusable="false"
                >
                    <!-- 棋盘背景 -->
                    <rect width="400" height="400" fill="#FAF3D0" rx="12" />
                    <!-- 棋盘网格 -->
                    <g stroke="#d1b97f" stroke-width="2">
                        <line
                            v-for="i in 15"
                            :key="'v' + i"
                            :x1="i * 25"
                            :y1="25"
                            :x2="i * 25"
                            :y2="375"
                        />
                        <line
                            v-for="i in 15"
                            :key="'h' + i"
                            :x1="25"
                            :y1="i * 25"
                            :x2="375"
                            :y2="i * 25"
                        />
                    </g>
                    <!-- 黑棋 代表自己-->
                    <circle :cx="self?.position?.x" :cy="self?.position?.y" r="10" fill="#2b2b2b" />
                    <!-- 白棋 代表其他玩家 -->
                    <circle v-for="(item, index) in self.history" :key="index" :cx="item.x" :cy="item.y" r="10" fill="#fefefe" stroke="#ccc" stroke-width="1" />
                        cx="175"
                        cy="200"
                        r="10"
                        fill="#fefefe"
                        stroke="#ccc"
                        stroke-width="1"
                    />
                </svg>
            </div>
        </div>
    </main>
</template>

<style scoped>
.my-pos {
    position: absolute;
    transform: translate(-50%, -100%); /* 水平居中，垂直放到圆上方 */
    white-space: nowrap;
    font-size: 14px;
    color: red;
}

.card {
    width: min(1000px, 96%);
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 36px;
    align-items: center;
    background: rgba(255, 248, 220, 0.85);
    border-radius: 18px;
    padding: 36px;
    box-shadow:
        0 10px 30px rgba(139, 105, 20, 0.1),
        0 2px 6px rgba(139, 105, 20, 0.06);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(210, 180, 90, 0.3);
}

.left {
    padding: 12px 8px;
}

.code {
    font-size: clamp(48px, 9vw, 100px);
    margin: 0;
    font-weight: 700;
    letter-spacing: -2px;
    color: #a87400;
}

.headline {
    font-size: clamp(18px, 2.6vw, 24px);
    margin: 10px 0 6px;
    color: #4b3b15;
    font-weight: 600;
}

.desc {
    margin: 8px 0 20px;
    color: #6b5c35;
    font-size: 14px;
    max-width: 60ch;
}

.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.btn {
    appearance: none;
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    min-width: 120px;
    transition:
        transform 0.14s ease,
        box-shadow 0.14s ease;
}

.btn.ghost {
    background: transparent;
    border: 1px solid rgba(75, 59, 21, 0.3);
    color: #4b3b15;
}

.btn.ghost:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(75, 59, 21, 0.15);
}

.right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.decor {
    width: 100%;
    height: auto;
    max-width: 400px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(139, 105, 20, 0.1);
}
</style>
